/*
version 1.0

by suparerk@

sample data :
{
  "data" : [
  		[
			{"ID":1,"Year":2009},{"ID":2,"Year":2009},{"ID":3,"Year":2009},{"ID":4,"Year":2009},{"ID":5,"Year":2009}
		],
		[
		  {"name":"Name A", "start":"15/2/2009",	"end":"20/2/2009",	"color":"orange"},
		  {"name":"Name B", "start":"1/3/2009",	"end":"15/5/2009",	"color":"lightblue"},
		  {"name":"Name C", "start":"15/3/2009",	"end":"20/6/2009",	"color":"violet"}
		]
	]
}


-- set option "region" to "en" to use eng name ---

*/
(function($) {
	jQuery.fn.twTimeLine = function(settings) {
	
		var holder = $(this);
		var monthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
		var monthTH = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฏาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
		var monthEN = ['January','February','March','April','May','June','July','August','September','Octobet','November','December'];
		
		var defaults = {
						dataURL:"timelineData.txt",
						tableAttr:{width:'90%', align:'center' , border:0, cellspacing:1,  cellpadding:2},
						region:"th"
						}
		var options = jQuery.extend(defaults, settings);
		
		if(options.region == "th"){
			monthNames = monthTH;
		}else{
			monthNames = monthEN;
		}
		
		$.getJSON(options.dataURL, function(data) {//load
			
			var rank = data.Rank;
			var timeData = data.TimeData;
			
			
			$(holder).addClass("ui-tw-gridTable ui-widget ui-corner-all ui-widget-content").attr(options.tableAttr)
			$(holder).html("")
			$(holder).append('<thead><tr><th class="ui-widget-header">Test/Mounth</th></tr></thead>');
			$(holder).find("thead").after('<tbody></tbody>');
			//header
			$(rank).each(function(i){
				$(holder).find("thead tr").append('<th class="ui-widget-header">'+monthNames[rank[i].ID]+'</th>');
			});
			$(holder).find("thead tr th:gt(0)").width(80/(rank.length)+"%");
			//body
			
			$(timeData).each(function(i){
				$(holder).find("tbody").append('<tr key="timeLine'+i+'"><td class="ui-state-default" align="right">'+timeData[i].name+'</td></tr>');
				var totalDays =0;
				$(rank).each(function(j){
					$(holder).find('tbody tr[key="timeLine'+i+'"]').append('<td class="ui-state-highlight" style="padding:0;border:none;"></td>');
					
					var timeLength = 100;//default width of bar
					var timeFloat = "none"
					var timeCorner =  "ui-corner-none"
					
					var thisMdays = monthDays[rank[j].ID];
					// for 29 / 2
					if(rank[j].ID == 1 && String(rank[j].Year/4).indexOf(".") == -1){
						thisMdays = Number(thisMdays+1);
					}
					//var lastMdays = monthDays[rank[j+1].ID];
		
						
					with (timeData[i]) {
						//alert(start +":"+  Number(totalDays+thisMdays))
						totalDays =  Number(totalDays+thisMdays);
						
						firstDate = Date.UTC(rank[0].Year,Number(rank[0].ID+1),1);
						
						var tmpDate1 = start.split("/");
						startDate = Date.UTC(tmpDate1[2],tmpDate1[1],tmpDate1[0]);
						
						var tmpDate2 = end.split("/");
						endDate =  Date.UTC(tmpDate2[2],tmpDate2[1],tmpDate2[0]);
						
						dayStart = Number(startDate - firstDate)/(1000*60*60*24);
						dayEnd = Number(endDate - firstDate)/(1000*60*60*24);
						
						
						if( tmpDate1[1] == tmpDate2[1] && tmpDate1[1] == rank[j].ID+1  && (totalDays - dayStart)*100/thisMdays <= 100 ){
							//one mounth time
							timeLength = (dayEnd - dayStart)*100/thisMdays;
							var lapTime = 100-((totalDays-dayStart)*100/thisMdays);
			
							$(holder).find('tbody tr[key="timeLine'+i+'"] td:eq('+(j+1)+')').append('<div id="line'+i+"_"+i+'" style="height:8px;border:none;position:relative;left:'+lapTime+'%;background-color:'+color+'"><div />').find("div").width(timeLength+"%").addClass("ui-corner-all");
							
						}else if(dayStart < totalDays && (totalDays - dayStart)*100/thisMdays <= 100 ){ 
							//set start bar size
							timeLength = (totalDays - dayStart)*100/thisMdays;
							//alert(timeLength);
							$(holder).find('tbody tr[key="timeLine'+i+'"] td:eq('+(j+1)+')').append('<div id="line'+i+"_"+i+'" style="height:8px;border:none;float:right;background-color:'+color+'"><div />').find("div").width(timeLength+"%").addClass("ui-corner-left");
						}else if( dayEnd < totalDays && (totalDays-dayEnd)*100/thisMdays <= 100){ 
							//set end bar size
							timeLength = 100-Number((totalDays-dayEnd)*100/thisMdays);
							//alert(timeLength)
							$(holder).find('tbody tr[key="timeLine'+i+'"] td:eq('+(j+1)+')').append('<div id="line'+i+"_"+i+'" style="height:8px;border:none;float:left;background-color:'+color+'"><div />').find("div").width(timeLength+"%").addClass("ui-corner-right");
						}else if(dayEnd == totalDays) {
							//last bar  = alldays
							timeLength = 100;
							$(holder).find('tbody tr[key="timeLine'+i+'"] td:eq('+(j+1)+')').append('<div id="line'+i+"_"+i+'" style="height:8px;border:none;float:left;background-color:'+color+'"><div />').find("div").width(timeLength+"%").addClass("ui-corner-right");
						}else if (dayStart < totalDays && dayEnd >totalDays ){
							//fill bar
							$(holder).find('tbody tr[key="timeLine'+i+'"] td:eq('+(j+1)+')').append('<div id="line'+i+"_"+i+'" style="height:8px;border:none;background-color:'+color+'"><div />');
						}				
						
					}//end with
					
					
				});
			});
			
	
				
		});//end load
		 

	 
	}
	
})(jQuery);
